<div class="bar">
   <ul>
      <li class="nav_phone" style="position: relative;">
         <a href="<?=url_phone_cat()?>"<?=$bar_active == 'phone' ? ' class="nav_active"' : ''?>>
            <i class="icon_phone"></i>
            <h3>Điện thoại di động</h3>
         </a>
         <ul class="sub_bar">
         <?
         $list_cat00 = db_array('SELECT cat_name,cat_alias FROM categories WHERE cat_type = "products" LIMIT 10');
         foreach($list_cat00 as $cat) {
            ?>
            <li><a href="/dien-thoai-<?=$cat['cat_alias']?>/"><?=$cat['cat_name']?></a></li>
            <?
         }
         ?>
         </ul>
      </li>
      <li class="nav_tablet">
         <a href="<?=url_tablet_cat()?>"<?=$bar_active == 'tablet' ? ' class="nav_active"' : ''?>>
            <i class="icon_tablet"></i>
            <h3>Máy tính bảng</h3>
         </a>
      </li>
      <li class="nav_accessories" style="position: relative;">
         <a href="<?=url_accessories_cat()?>"<?=$bar_active == 'accessories' ? ' class="nav_active"' : ''?>>
            <i class="icon_accessories"></i>
            <h3>Phụ kiện</h3>
         </a>
         <ul class="sub_bar">
         <?
         $list_cat01 = db_array('SELECT cat_name,cat_alias FROM categories WHERE cat_type = "accessories" LIMIT 15');
         foreach($list_cat01 as $cat) {
            ?>
            <li><a href="/phu-kien-<?=$cat['cat_alias']?>/"><?=$cat['cat_name']?></a></li>
            <?
         }
         ?>
         </ul>
      </li>
      <li class="nav_services" style="position: relative;">
         <a href="<?=url_services_cat()?>"<?=$bar_active == 'services' ? ' class="nav_active"' : ''?>>
            <i class="icon_services"></i>
            <h3>Dịch vụ sửa chữa</h3>
         </a>
         <ul class="sub_bar">
         <?
         $list_cat02 = db_array('SELECT * FROM categories WHERE cat_type = "services" AND cat_parent_id = 0 ORDER BY cat_order');
         foreach($list_cat02 as $cat) {
            ?>
            <li><a href="<?=url_services_cat($cat['cat_alias'])?>"><?=$cat['cat_name']?></a></li>
            <?
         }
         ?>
         </ul>
      </li>
      <li class="nav_hotline">
         <a href="javascript:;">
            <h3>HOTLINE / 0466.565.565 - 0968.655.655 </h3>
            <i class="icon_hotline"></i>
         </a>
      </li>
   </ul>
<style>
.sub_bar {
   position: absolute;
   top: 50px;
   right: -12px;
   z-index:  10001;
   display: none;
   border: 1px solid #ccc;
   border-top: none;
}
.sub_bar li {
   display: block !important;
}
.sub_bar li a {
   background: #fff !important;
   height: 30px !important;
   line-height: 30px !important;
   padding-left: 10px;
   color: #333 !important;
   margin-left: 0px !important;
   text-shadow: 1px 1px #fff !important;
}
.nav_phone:hover .sub_bar {
   display: block;
}
.nav_accessories:hover .sub_bar {
   display: block;
}
.nav_services:hover .sub_bar {
   display: block;
}
</style>
</div>